<template>
  <div class="login_page">
    <div class="video">
      <video src="~@img/login/bg.mp4" autoplay loop muted></video>
    </div>
    <div class="bg4">
      <div class="login_header clearfix">
        <div class="time">{{ nowTime }}</div>
        <div class="user" @click="dialogVisible = true">
          <img src="~@img/login/icon-index-login.png" alt="" />
          <span>注册/登录</span>
        </div>
      </div>
      <ul class="login_main">
        <li @click="openDialog">
          <img src="~@img/login/index-icon01.png" alt="" />
          <p>招商驾驶舱</p>
        </li>
        <li @click="openDialog">
          <img src="~@img/login/index-icon04.png" alt="" />
          <p>载体资源库</p>
        </li>
        <li @click="openDialog">
          <img src="~@img/login/index-icon02.png" alt="" />
          <p>产业现状图谱</p>
        </li>
        <li @click="openDialog">
          <img src="~@img/login/index-icon05.png" alt="" />
          <p>360企业画像</p>
        </li>
        <li @click="openDialog">
          <img src="~@img/login/index-icon03.png" alt="" />
          <p>产业招商雷达</p>
        </li>
        <li @click="openDialog">
          <img src="~@img/login/index-icon07.png" alt="" />
          <p>项目化管理</p>
        </li>
        <li @click="openDialog">
          <img src="~@img/login/index-icon04.png" alt="" />
          <p>产业招商地图</p>
        </li>
        <li @click="openDialog">
          <img src="~@img/login/index-icon08.png" alt="" />
          <p>太忻一体化</p>
          <p>经济区（太原区）</p>
        </li>
      </ul>
      <div class="popup-box" v-if="dialogVisible" @click="dialogVisible = false"></div>
      <div class="popup-box" v-if="dialogRegister" @click="closeReg"></div>
      <div class="popup" v-if="dialogVisible">
        <div class="close" @click="dialogVisible = false">
          <img src="~@img/login-pop/icon-login-close.png" alt="" />
        </div>
        <el-tabs v-model="activeName1" v-if="bind == false && admin == false">
          <el-tab-pane label="外部" name="outside">
            <div class="input_father">
              <img src="~@img/login-pop/icon-number.png" alt="" />
              <el-input v-model="phone" type="text" placeholder="请输入手机号码" autocomplete="new-password"
                style="width: 100%"></el-input>
              <!-- autocomplete="new-password" -->
            </div>
            <div class="input_father">
              <img src="~@img/login-pop/icon-password.png" alt="" />
              <el-input v-model="vCode" type="text" placeholder="请输入验证码" autocomplete="new-password" style="width: 100%"
                class="code-input"></el-input>
              <span v-show="!isSend" class="code" @click="sendCode">获取验证码</span>
              <span v-show="isSend" class="send_code">{{ RemainingTime }}秒后重新获取</span>
            </div>
            <div class="submit" @click="codeLogin">立即登录</div>
            <div class="other">
              <div>
                其他方式登录
                <img @click="wxLogin" src="~@img/login-pop/icon-wechat.png" alt="" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="内部" name="inside">
            <div class="input_father">
              <img src="~@img/login-pop/icon-number.png" alt="" />
              <!--autocomplete="new-password"  -->
              <el-input v-model="phone" type="text" placeholder="请输入手机号码" autocomplete="new-password"
                style="width: 100%"></el-input>
            </div>
            <div class="input_father">
              <img src="~@img/login-pop/icon-password.png" alt="" />
              <el-input v-model="password" type="password" placeholder="请输入密码" autocomplete="new-password"
                style="width: 100%"></el-input>

              <!--  autocomplete="new-password" -->
              <!-- <span class="forget">
                忘记密码？
              </span> -->
              <div class="tips" v-if="tips.length > 1">
                {{ tips }}
              </div>
            </div>

            <div class="submit" @click="pwdLogin">立即登录</div>
            <div class="other">
              <div @click="showRegister">
                <img src="~@img/login-pop/icon-register.png" alt="" />
                立即注册
              </div>
              <div @click="admin = true">
                <img src="~@img/login-pop/icon-manage-normal.png" alt="" />
                管理员登录
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName2" v-if="bind == false && admin == true">
          <el-tab-pane label="管理员登录入口" name="admin">
            <div class="input_father">
              <img src="~@img/login-pop/icon-number.png" alt="" />
              <el-input v-model="username" type="text" placeholder="请输入用户名" style="width: 100%"></el-input>
              <!-- autocomplete="new-password" -->
            </div>
            <div class="input_father">
              <img src="~@img/login-pop/icon-password.png" alt="" />
              <el-input v-model="adminPwd" type="password" placeholder="请输入密码" style="width: 100%"></el-input>
              <!-- autocomplete="new-password"  -->
            </div>
            <div class="submit" @click="adminPwdLogin">立即登录</div>
            <div class="other o-r">
              <div @click="admin = false">
                <img src="~@img/login-pop/icon-back.png" alt="" />
                返回
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName3" v-if="bind == true">
          <el-tab-pane label="请绑定手机号" name="bind">
            <div class="input_father">
              <img src="~@img/login-pop/icon-number.png" alt="" />
              <el-input v-model="phone" type="text" autocomplete="new-password" placeholder="请输入手机号码"
                style="width: 100%"></el-input>
            </div>
            <div class="input_father">
              <img src="~@img/login-pop/icon-password.png" alt="" />
              <el-input v-model="vCode" placeholder="请输入验证码" autocomplete="new-password" type="text" style="width: 100%"
                class="code-input"></el-input>
              <span v-show="!isSend" class="code" @click="sendCode">获取验证码</span>
              <span v-show="isSend" class="send_code">{{ RemainingTime }}秒后重新获取</span>
            </div>
            <div class="bind">
              <span @click="closeBind">取消</span>
              <span @click="codeLogin">登录</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="popup-register" v-if="dialogRegister">
        <div class="close" @click="closeReg">
          <img src="~@img/login-pop/icon-login-close.png" alt="" />
        </div>
        <el-tabs v-model="activeName4">
          <el-tab-pane label="注册账号" name="register">
            <form ref="form" :model="form">
              <div class="flex-form">
                <div>
                  <span>姓名</span>
                  <el-input v-model="form.real_name" placeholder="请输入姓名"></el-input>
                </div>
                <div>
                  <span>年龄</span>
                  <el-input v-model="form.age" placeholder="请输入年龄" />
                </div>
                <div>
                  <span>性别</span>

                  <el-select v-model="form.sex" slot="prepend" placeholder="请选择">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="flex-form">
                <div>
                  <span>手机号</span>
                  <el-input auto-complete="off" v-model="form.mobile" placeholder="请输入手机" type="text" />
                </div>
                <div class="send-yzm">
                  <span>验证码</span>
                  <span v-show="!isSendRegister" class="yzm" @click="sendCodeByRegister">获取验证码</span>
                  <span v-show="isSendRegister" class="send_code yzm">{{ RemainingTime }}秒后重新获取</span>

                  <el-input autocomplete="new-password" v-model="form.sms_code" placeholder="请输入验证码" type="text" />
                </div>
                <div>
                  <span>密码</span>
                  <el-input autocomplete="new-password" v-model="form.password" placeholder="请输入密码" type="password" />
                </div>
              </div>
              <div class="flex-form">
                <div>
                  <span>确认密码</span>
                  <el-input v-model="form.repassword" placeholder="再次输入密码" type="password" />
                </div>
                <div>
                  <span>用户名</span>
                  <el-input v-model="form.name" placeholder="请输入用户名" type="text" />
                </div>
                <div>
                  <span>职务</span>
                  <el-input v-model="form.position" placeholder="请输入职务" type="text" />
                </div>
              </div>
              <div class="flex-form">
                <div>
                  <span>所属县区</span>
                  <el-select v-model="form.district_name" slot="prepend" placeholder="请选择">
                    <el-option v-for="item in districtOptions" :key="item.value" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                </div>
                <div>
                  <span>单位</span>
                  <el-select v-model="form.unit" slot="prepend" placeholder="请选择" @change="labelchange($event)">
                    <el-option v-for="item in monadoptions" :key="item.value" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                </div>
                <div v-if="branchshow">
                  <span>所属部门</span>
                  <el-select v-model="form.section" slot="prepend" placeholder="请选择">
                    <el-option v-for="item in branchoptions" :key="item.value" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                </div>
              </div>
            </form>
            <div class="btn-box">
              <div @click="closeReg">返回</div>
              <div @click="onSubmit">立即注册</div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getyzm,
  gotologin,
  bypwdlogin,
  administratorlogin,
  login_byvx,
  binding,
  getorgs,
  getregister,
} from "@api/login";
import { getCurrentUserInfo } from "@api/projectManaApi";
export default {
  data() {
    return {
      bind: false,
      admin: false,
      // 现在时间
      nowTime: null,
      // 是否显示登录弹框
      dialogVisible: false,
      dialogRegister: false,
      // 登录选显卡
      activeName1: "outside",
      activeName2: "admin",
      activeName3: "bind",
      activeName4: "register",
      // 用户名
      username: "",
      // 手机号
      phone: "",
      // 验证码
      vCode: "",
      // 密码
      password: "",
      // 管理员密码
      adminPwd: "",
      // 绑定手机号所需
      openid: "",
      unionid: "",
      // 是否发送验证码
      isSend: false,
      // 倒计时定时器
      times: null,
      // 锁定倒计时
      timer: "",
      tips: "",
      // 剩余时间
      RemainingTime: 60,
      // 验证码发送次数
      SendingTimes: 0,
      query: {},

      input1: "",
      select: "",
      form: {
        real_name: "",
        age: "",
        sex: "",
        mobile: "",
        sms_code: "",
        password: "",
        repassword: "",
        position: "",
        unit: "",
        section: "",
        name: "",
        district_name: "",
      },

      isSendRegister: false,
      time: "60",
      monadoptions: [],
      branchoptions: [],
      districtOptions: [
        { label: "太原市", value: "太原市" },
        { label: "小店区", value: "小店区" },
        { label: "迎泽区", value: "迎泽区" },
        { label: "杏花岭区", value: "杏花岭区" },
        { label: "万柏林区", value: "万柏林区" },
        { label: "尖草坪区", value: "尖草坪区" },
        { label: "晋源区", value: "晋源区" },
        { label: "古交市", value: "古交市" },
        { label: "清徐县", value: "清徐县" },
        { label: "阳曲县", value: "阳曲县" },
        { label: "娄烦县", value: "娄烦县" },
        { label: "综改示范区", value: "综改示范区" },
        { label: "中北高新区", value: "中北高新区" },
        { label: "清徐开发区", value: "清徐开发区" },
        { label: "阳曲示范区", value: "阳曲示范区" },
        { label: "西山示范区", value: "西山示范区" },
      ],
      branchshow: false,
    };
  },
  created() {
    this.getNowTime();
    this.getorgsdata();
    localStorage.setItem("login", "");
    this.query = this.$route.query;
    if (this.query.code) {
      this.LoginByvx(this.query.code);
    }
  },
  mounted() {
    // window.onpopstate = () => {
    //   if (!localStorage.getItem("login")) {
    //     this.$router.push({ path: "/" });
    //   }
    // };
  },
  methods: {
    // 选项切换
    labelchange(index) {
      let obj = {};
      obj = this.monadoptions.find((item) => {
        return item.label === index; //筛选出匹配数据
      });
      if (obj.value === 1) {
        this.branchshow = true;
      } else {
        this.branchshow = false;
      }
    },
    // 显示注册框
    showRegister() {
      this.dialogVisible = false;
      this.dialogRegister = true;
      this.times ? clearInterval(this.times) : "";
      this.RemainingTime = 60;
      this.isSendRegister = false;
    },
    // 关闭注册框
    closeBind() {
      this.bind = false;
      this.times ? clearInterval(this.times) : "";
      this.RemainingTime = 60;
      this.isSendRegister = false;
      this.isSend = false;
    },
    // 关闭注册框
    closeReg() {
      this.dialogRegister = false;
      this.dialogVisible = true;
      this.form = {
        real_name: "",
        age: "",
        sex: "",
        mobile: "",
        sms_code: "",
        password: "",
        repassword: "",
        position: "",
        unit: "",
        section: "",
        name: "",
        district_name: "",
      };
      this.times ? clearInterval(this.times) : "";
      this.RemainingTime = 60;
      this.isSendRegister = false;
      this.isSend = false;
    },
    // 获取注册选择项
    async getorgsdata() {
      const res = await getorgs();
      this.monadoptions = res.orgs.data;
      this.branchoptions = res.orgs.section;
    },

    countDown(time) {
      this.timer == null ? "" : clearInterval(this.timer);
      this.timer = setInterval(() => {
        let m = this.Rounding(Math.floor(time / 60));
        let s = this.Rounding(time % 60);
        time -= 1;
        this.tips = "您的账户已锁定,距解锁还剩 " + m + " 分 " + s + " 秒";
        if (time <= 0) {
          clearInterval(this.timer);
          this.tips = "";
        }
      }, 1000);
    },
    Rounding(value) {
      return value < 10 ? "0" + value : value;
    },
    async adminLogin(name, password) {
      let res = await administratorlogin({
        name,
        password,
      });
      if (res.code == 4004) {
        this.$message.error(res.msg);
      } else if (res.code === 200) {
        this.$message({
          message: "登录成功",
          type: "success",
          duration: 1000,
          showClose: true,
        });
        localStorage.setItem("login", res.token);
        this.$store.commit("setFlag", res.flag);
        this.$router.push({ name: "projectmanage" });
      } else {
        this.$message.error(res.msg);
      }
    },
    async bindPhone(openid, unionid, mobile, sms_code) {
      let res = await binding({ openid, unionid, mobile, sms_code });
      if (res.code == 0) {
        this.$message({
          message: "登录成功",
          type: "success",
          duration: 1000,
          showClose: true,
        });
        localStorage.setItem("login", res.token);
        this.$store.commit("setFlag", res.flag);
        this.$router.push({ name: "cockpit" });
      } else {
        this.$message.error(res.msg);
      }
    },
    async LoginByvx(code) {
      let res = await login_byvx({ code });
      if (res.code == 4104) {
        this.$message({ type: "warning", message: res.msg });
        this.bind = true;
        this.dialogVisible = true;
        this.openid = res.user_info.openid;
        this.unionid = res.user_info.unionid;
      } else if (res.code == 0) {
        this.$message({
          message: "登录成功",
          type: "success",
          duration: 1000,
          showClose: true,
        });
        localStorage.setItem("login", res.token);
        this.$store.commit("setFlag", res.flag);
        this.$router.push({ name: "cockpit" });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 发送验证码
    async getCode(mobile) {
      let res = await getyzm({ mobile });
      if (res.code == 0) {
        // 发送成功
        this.isSend = true;
        this.SendingTimes++;
        // success/warning/info/error
        this.$message({ type: "success", message: "发送成功" });
        // 开启倒计时且不可点击
        this.times = setInterval(() => {
          if (this.RemainingTime > 0) {
            this.RemainingTime--;
          } else {
            clearInterval(this.times);
            this.RemainingTime = 60;
            this.isSend = false;
          }
        }, 1000);
      } else if (res.code == 4900) {
        this.$message.error(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 验证码登录接口
    async LoginBySms(mobile, sms_code) {
      let res = await gotologin({ mobile, sms_code });
      if (res.code == 0) {
        this.$message({
          message: "登录成功",
          type: "success",
          duration: 1000,
          showClose: true,
        });
        localStorage.setItem("login", res.token);
        this.$store.commit("setFlag", res.flag);
        this.$router.push({ name: "cockpit" });
      } else if (res.code == 4004) {
        this.$message.error(res.msg);
      }
    },
    // 密码登录接口
    async LoginByPwd(mobile, password) {
      // localStorage.setItem("login", '');
      // this.$store.commit("setRoleId", 1);
      // this.$store.commit("setFlag", 2);
      // this.$router.push({ name: "cockpit" });
      // return;
      let res = await bypwdlogin({
        mobile,
        password,
      });
      if (res.code == 0) {
        this.$message({
          message: "登录成功",
          type: "success",
          duration: 1000,
          showClose: true,
        });
        if (res.token) {
          this.newPorjectUserInfo();
        }
        localStorage.setItem("district_name", res.district_name || "");
        localStorage.setItem("login", res.token);
        localStorage.setItem("funcList", res.fun_permission_list);
        localStorage.setItem("pageList", res.page_permission_list);
        localStorage.setItem("org_id", res.org_id);

        this.$store.commit("setRoleId", res.role_id);
        this.$store.commit("setFlag", res.flag);
        this.$store.commit("setFuncList", res.fun_permission_list);
        this.$store.commit("setPageList", res.page_permission_list);

        let {
          indexRouter,
          resourcesIndex,
          projectglIndex,
          projectThreeIndex,
          noAccessRouter,
        } = this.limitsOfAuthority(res.page_permission_list);
        // this.$store.commit("setResourcesIndex", resourcesIndex);
        // this.$store.commit("setProjectglIndex", projectglIndex);
        // this.$store.commit("setNoAccessRouter", noAccessRouter);

        localStorage.setItem("resourcesIndex", resourcesIndex);
        localStorage.setItem("projectglIndex", projectglIndex);
        localStorage.setItem("projectThreeIndex", projectThreeIndex);
        localStorage.setItem("noAccessRouter", noAccessRouter);
        this.$router.push({ name: indexRouter });
      } else {
        this.$message.error(res.msg);
      }
    },
    async newPorjectUserInfo() {
      const res = await getCurrentUserInfo();
      console.log(res, res.user, res.user.section);
      if (
        res.code === 200 &&
        res.user &&
        res.user.section &&
        res.user.section !== ""
      ) {
        // 有权限
        this.$store.commit("setShowProject", true);
        this.$store.commit("setCurSection", res.user.section);
        this.$store.commit("setMunicipalBureau", res.user.section === "区域经济合作部" || res.user.section === "项目服务办");
      } else {
        // 无权限
        this.$store.commit("setShowProject", false);
      }
    },
    limitsOfAuthority(pageList) {
      let indexRouter = "";
      let resourcesIndex = "";
      let projectglIndex = "";
      let projectThreeIndex = "";
      let noAccessRouter = [];
      if (pageList.includes(1) == false) {
        noAccessRouter.push("cockpit");
      } else {
        indexRouter == "" ? (indexRouter = "cockpit") : "";
      }
      if (pageList.includes(2) == false) {
        noAccessRouter.push("atlas");
      } else {
        indexRouter == "" ? (indexRouter = "atlas") : "";
      }
      if (pageList.includes(3) == false) {
        noAccessRouter.push("radar");
      } else {
        indexRouter == "" ? (indexRouter = "radar") : "";
      }
      if (pageList.includes(4) == false) {
        noAccessRouter.push("map");
      } else {
        indexRouter == "" ? (indexRouter = "map") : "";
      }
      if (pageList.includes(5) == false) {
        noAccessRouter.push("portrait");
      } else {
        indexRouter == "" ? (indexRouter = "portrait") : "";
      }
      if (
        pageList.includes(6) == false &&
        pageList.includes(7) == false &&
        pageList.includes(8) == false
      ) {
        noAccessRouter.push("resources");
      }
      if (pageList.includes(6) == false) {
        noAccessRouter.push("industrymap");
      } else {
        resourcesIndex == "" ? (resourcesIndex = "industrymap") : "";
        indexRouter == "" ? (indexRouter = "industrymap") : "";
      }
      if (pageList.includes(7) == false) {
        noAccessRouter.push("estimate");
      } else {
        resourcesIndex == "" ? (resourcesIndex = "estimate") : "";
        indexRouter == "" ? (indexRouter = "estimate") : "";
      }
      if (pageList.includes(8) == false) {
        noAccessRouter.push("filling");
      } else {
        resourcesIndex == "" ? (resourcesIndex = "filling") : "";
        indexRouter == "" ? (indexRouter = "filling") : "";
      }
      if (
        pageList.includes(9) == false &&
        pageList.includes(10) == false &&
        pageList.includes(11) == false &&
        pageList.includes(12) == false &&
        pageList.includes(13) == false &&
        pageList.includes(14) == false &&
        pageList.includes(15) == false
      ) {
        noAccessRouter.push("projectgl");
      }
      if (pageList.includes(9) == false) {
        noAccessRouter.push("overview");
      } else {
        projectglIndex == "" ? (projectglIndex = "overview") : "";
        indexRouter == "" ? (indexRouter = "overview") : "";
      }
      if (pageList.includes(10) == false) {
        noAccessRouter.push("myproject");
      } else {
        projectglIndex == "" ? (projectglIndex = "myproject") : "";
        indexRouter == "" ? (indexRouter = "myproject") : "";
      }
      if (pageList.includes(11) == false) {
        noAccessRouter.push("infoaccountbook");
      } else {
        projectglIndex == "" ? (projectglIndex = "infoaccountbook") : "";
        indexRouter == "" ? (indexRouter = "infoaccountbook") : "";
      }
      if (pageList.includes(12) == false) {
        noAccessRouter.push("projectaccountbook");
      } else {
        projectglIndex == "" ? (projectglIndex = "projectaccountbook") : "";
        indexRouter == "" ? (indexRouter = "projectaccountbook") : "";
      }
      if (pageList.includes(13) == false) {
        noAccessRouter.push("statistics");
      } else {
        projectglIndex == "" ? (projectglIndex = "statistics") : "";
        indexRouter == "" ? (indexRouter = "statistics") : "";
      }
      if (pageList.includes(14) == false) {
        noAccessRouter.push("ranking");
      } else {
        projectglIndex == "" ? (projectglIndex = "ranking") : "";
        indexRouter == "" ? (indexRouter = "ranking") : "";
      }
      if (pageList.includes(15) == false) {
        noAccessRouter.push("score");
      } else {
        projectglIndex == "" ? (projectglIndex = "score") : "";
        indexRouter == "" ? (indexRouter = "score") : "";
      }

      if (
        pageList.includes(98) == false &&
        pageList.includes(99) == false &&
        pageList.includes(100) == false &&
        pageList.includes(101) == false
      ) {
        noAccessRouter.push("projectmanage");
      }
      if (pageList.includes(98) == false) {
        noAccessRouter.push("overview3");
      } else {
        projectThreeIndex == "" ? (projectThreeIndex = "overview3") : "";
        indexRouter == "" ? (indexRouter = "overview3") : "";
      }
      if (pageList.includes(99) == false) {
        noAccessRouter.push("account3");
      } else {
        projectThreeIndex == "" ? (projectThreeIndex = "account3") : "";
        indexRouter == "" ? (indexRouter = "account3") : "";
      }
      if (pageList.includes(100) == false) {
        noAccessRouter.push("statistics3");
      } else {
        projectThreeIndex == "" ? (projectThreeIndex = "statistics3") : "";
        indexRouter == "" ? (indexRouter = "statistics3") : "";
      }
      if (pageList.includes(101) == false) {
        noAccessRouter.push("myproject3");
      } else {
        projectThreeIndex == "" ? (projectThreeIndex = "myproject3") : "";
        indexRouter == "" ? (indexRouter = "myproject3") : "";
      }

      indexRouter == "" ? (indexRouter = "yhhuvhxs") : "";

      return {
        indexRouter,
        resourcesIndex,
        projectglIndex,
        projectThreeIndex,
        noAccessRouter,
      };
    },
    // 获取当前时间
    getNowTime() {
      this.nowTime = this.$moment().format("YYYY[年]MMMDo  h:mm:ss");
    },
    // 打开登录弹框
    openDialog() {
      this.dialogVisible = true;
    },
    // 关闭登录弹框并清除输入框数据
    closeDialog() {
      this.phone = "";
      this.vCode = "";
      this.password = "";
      this.dialogVisible = false;
    },

    // 发送验证码
    sendCode() {
      // 判断是否正确填写手机号
      let msg_phone = this.regPhone(this.phone);
      if (msg_phone) {
        this.$message({ type: "warning", message: msg_phone });
        return;
      } // 判断是否已经发送过验证码
      if (this.isSend == true) {
        this.$message("验证码已发送");
        return;
      }
      if (this.bind == false) {
        // 请求获取验证码接口
        this.getCode(this.phone, 1);
      } else {
        // 请求获取验证码接口
        this.getCode(this.phone, 2);
      }
    },

    allSame(value) {
      let data = value.split("");
      let chartCode = []; // 存放ASCII码
      let same = true;
      for (let i in data) {
        chartCode.push(value.charCodeAt(i));
        if (chartCode.length === data.length) {
          for (let i = 1; i <= chartCode.length; i++) {
            if (Math.abs(Number(chartCode[i]) - Number(chartCode[i - 1])) > 1) {
              same = false;
              break;
            }
          }
        }
      }
      return same;
    },
    passMessage(s) {
      var i = /[0-9]+/;
      var str = /[A-Za-z]/;
      var spec = /[,.<>{}~!@#$%^&*]/;
      if (!str.test(s)) {
        return "必须包含字母";
      }
      if (!i.test(s)) {
        return "必须包含数字";
      }
      if (!spec.test(s)) {
        return "必须包含特殊字符。例如：!@#$%^&* 其中一个或多个";
      }
    },
    async onSubmit() {
      if (this.form.real_name == "") {
        this.$message({
          message: "请输入姓名",
          type: "error",
        });
        return false;
      } else if (this.form.age == "") {
        this.$message({
          message: "请输入年龄",
          type: "error",
        });
        return false;
      } else if (this.form.sex == "") {
        this.$message({
          message: "请选择性别",
          type: "error",
        });
        return false;
      } else if (this.form.mobile == "") {
        this.$message({
          message: "请输入手机号",
          type: "error",
        });
        return false;
      } else if (this.form.sms_code == "") {
        this.$message({
          message: "请输入验证码",
          type: "error",
        });
        return false;
      } else if (this.form.password == "") {
        this.$message({
          message: "请输入密码",
          type: "error",
        });
        return false;
      } else if (this.form.repassword == "") {
        this.$message({
          message: "请输入重复密码",
          type: "error",
        });
        return false;
      } else if (this.form.name == "") {
        this.$message({
          message: "请输入用户名",
          type: "error",
        });
        return false;
      } else if (this.form.position == "") {
        this.$message({
          message: "请输入职务",
          type: "error",
        });
        return false;
      } else if (this.form.unit == "") {
        this.$message({
          message: "请选择单位",
          type: "error",
        });
        return false;
      } else if (this.form.district_name == "") {
        this.$message({
          message: "请选择所属县区",
          type: "error",
        });
        return false;
      }
      if (this.form.password.length < 8) {
        this.$message({
          message: "密码长度应8位以上",
          type: "error",
        });
        return false;
      }
      let msg = this.passMessage(this.form.password);
      if (msg) {
        this.$message({
          message: msg,
          type: "error",
        });
        return false;
      }

      if (this.allSame(this.form.password)) {
        this.$message({
          message: "不能使用连续性字母，数字作为密码",
          type: "error",
        });
        return false;
      }
      if (this.form.password != this.form.repassword) {
        this.$message({
          message: "两次输入的密码不一致",
          type: "error",
        });
        return false;
      }

      const res = await getregister(this.form);
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.dialogVisible = true;
        this.dialogRegister = false;
        this.times ? clearInterval(this.times) : "";
        this.RemainingTime = 60;
        this.isSendRegister = false;
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
    // 获取注册验证码
    async sendCodeByRegister() {
      // 判断是否正确填写手机号
      let msg_phone = this.regPhone(this.form.mobile);
      if (msg_phone) {
        this.$message({ type: "warning", message: msg_phone });
        return;
      }
      let res = await getyzm({ mobile: this.form.mobile });
      if (res.code == 0) {
        this.isSendRegister = true;
        this.$message({
          message: "发送成功",
          type: "success",
        });
        this.times = setInterval(() => {
          if (this.RemainingTime > 0) {
            this.RemainingTime--;
          } else {
            clearInterval(this.times);
            this.RemainingTime = 60;
            this.isSendRegister = false;
          }
        }, 1000);
      } else {
        this.isSendRegister = false;
        this.$message.error(res.msg);
      }
    },

    // 手机号验证
    regPhone(value) {
      let reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[02567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (value == "") {
        return "请输入手机号";
      } else if (!reg_tel.test(value)) {
        return "请输入正确格式的手机号码";
      } else {
        return "";
      }
    },
    // 验证码验证
    regCode(value) {
      if (this.SendingTimes < 1) {
        return "请先获取验证码";
      } else if (value == "") {
        return "请输入验证码";
      } else if (value.length != 6) {
        return "请正确填写六位验证码";
      } else {
        return "";
      }
    },
    // 密码验证
    regPassWord(value) {
      // let reg_tel = /^$/;
      if (value == "") {
        return "请输入密码";
      }
      // else if (!reg_tel.test(value)) {
      //   return "请输入正确格式的密码";
      // }
      else if (value.length < 6) {
        return "填写的密码不可少于六位";
      } else {
        return "";
      }
    },

    //验证码登录
    codeLogin() {
      // 判断是否正确填写手机号
      let msg_phone = this.regPhone(this.phone);
      if (msg_phone) {
        this.$message({ type: "warning", message: msg_phone });
        return;
      }
      // 是否发送过验证码  是否正确填写验证码
      let msg_code = this.regCode(this.vCode);
      if (msg_code) {
        this.$message({ type: "warning", message: msg_code });
        return;
      }
      if (this.bind == false) {
        // 验证通过 发送请求 登录接口
        this.LoginBySms(this.phone, this.vCode);
      } else {
        this.bindPhone(this.openid, this.unionid, this.phone, this.vCode);
      }
    },
    // 密码登录
    pwdLogin() {
      // 判断是否正确填写手机号
      let msg_phone = this.regPhone(this.phone);
      if (msg_phone) {
        this.$message({ type: "warning", message: msg_phone });
        return;
      }
      // 判断是否正确填写密码
      let msg_pwd = this.regPassWord(this.password);
      if (msg_pwd) {
        this.$message({ type: "warning", message: msg_pwd });
        return;
      }
      // 验证通过 发送请求 登录接口

      this.LoginByPwd(this.phone, this.password);
    },
    // 管理员密码登录
    adminPwdLogin() {
      // 判断是否正确填写手机号
      if (this.username == "") {
        this.$message({ type: "warning", message: "请输入用户名" });
        return;
      }
      if (this.adminPwd == "") {
        this.$message({ type: "warning", message: "请输入密码" });
        return;
      }
      // 验证通过 发送请求 登录接口
      this.adminLogin(this.username, this.adminPwd);
    },
    // 微信扫码
    wxLogin() {
      let appid = "wx30032aa8ecb75891";
      // let url = "http://newty.industrychain.online:8009";
      let url = "http%3A%2F%2Fnewty.industrychain.online%3A8009%2F%23%2Flogin";

      window.location.href =
        "https://open.weixin.qq.com/connect/qrconnect?appid=" +
        appid +
        "&redirect_uri=" +
        url +
        "&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect";
    },
    // -----以下验证没有用到-----
    // 判断是否连续字符
    allSame(value) {
      let data = value.split("");
      let chartCode = []; // 存放ASCII码
      let same = true;
      for (let i in data) {
        chartCode.push(value.charCodeAt(i));
        if (chartCode.length === data.length) {
          for (let i = 1; i <= chartCode.length; i++) {
            if (Math.abs(Number(chartCode[i]) - Number(chartCode[i - 1])) > 1) {
              same = false;
              break;
            }
          }
        }
      }
      return same;
    },
    // 判断是否是否包含字母 数字特殊字符
    passMessage(s) {
      var i = /[0-9]+/;
      var str = /[A-Za-z]/;
      var spec = /[,.<>{}~!@#$%^&*]/;
      if (!str.test(s)) {
        return "必须包含字母";
      }
      if (!i.test(s)) {
        return "必须包含数字";
      }
      if (!spec.test(s)) {
        return "必须包含特殊字符。例如：!@#$%^&* 其中一个或多个";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bind {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
  width: 460px;
  height: 64px;
  line-height: 64px;
  text-align: center;

  font-size: 28px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;

  span {
    border-radius: 7px;
    width: 48%;
    border: 1px solid #0177e4;
  }

  span:last-of-type {
    border: none;
    background: -webkit-gradient(linear,
        left bottom,
        left top,
        from(#0177e4),
        to(#00b8ff));
    background: linear-gradient(0deg, #0177e4, #00b8ff);
  }
}

img {
  vertical-align: middle;
}

.tips {
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  color: #fff;
  opacity: 0.6;
  font-size: 14px;
}

.login_page {
  width: 100%;
  height: 100%;
  background: url("~@img/login/bg-index-earth1.jpg") no-repeat center;
  // background: url("~@img/login/bg-index-earth.png") no-repeat center;
  background-size: 100% 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  .bg4 {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0px 48px;
    position: relative;
  }

  .login_header {
    height: 100px;
    background: url("~@img/login/index-title.png") no-repeat center center;
    background-size: 100%;
  }

  .time {
    float: left;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    padding-top: 40px;
    margin-left: 120px;
    text-shadow: 0.2rem 0rem 0.4rem #0065b3, -0.2rem 0rem 0.4rem #0065b3,
      0rem 0.2rem 0.4rem #0065b3, 0rem -0.2rem 0.4rem #0065b3;
    opacity: 1;
    cursor: pointer;
  }

  .user {
    float: right;
    color: #fff;
    margin-right: 120px;
    padding-top: 30px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0.2rem 0rem 0.4rem #0065b3, -0.2rem 0rem 0.4rem #0065b3,
      0rem 0.2rem 0.4rem #0065b3, 0rem -0.2rem 0.4rem #0065b3;
    cursor: pointer;
  }
}

.video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

.login_main {
  width: 1366px;
  margin: 0 auto;
  position: relative;

  li {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    // border: 4px solid #ffffff;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    position: absolute;
    cursor: pointer;

    img {
      margin-top: 33px;
      margin-bottom: 7px;
    }

    p {
      font-size: 28px;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0.2rem 0rem 0.4rem #0065b3, -0.2rem 0rem 0.4rem #0065b3,
        0rem 0.2rem 0.4rem #0065b3, 0rem -0.2rem 0.4rem #0065b3;
    }
  }

  .cockpit_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: 100px;
    border: none;
    width: 500px;
    height: 500px;

    p {
      margin: 0 auto;
      width: 334px;
      height: 84px;
      line-height: 84px;
      border: 2px solid #ffffff;
      border-radius: 42px;
      font-size: 40px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      line-height: 81px;
      background-color: rgba(9, 11, 92, 0.4);
    }
  }

  li:nth-of-type(1) {
    top: 10px;
    left: 60px;
  }

  li:nth-of-type(2) {
    top: 10px;
    right: 50px;
  }

  li:nth-of-type(3) {
    top: 195px;
    left: -50px;
  }

  li:nth-of-type(4) {
    top: 195px;
    right: -90px;
    // right: 70px;
  }

  li:nth-of-type(5) {
    top: 385px;
    left: -50px;
  }

  li:nth-of-type(6) {
    top: 385px;
    right: -90px;
  }

  li:nth-of-type(7) {
    top: 560px;
    left: 60px;
  }

  li:nth-of-type(8) {
    top: 560px;
    right: 50px;
  }
}

/deep/ .el-dialog__header {
  height: 0;
  padding: 0;
}

/deep/ .el-dialog__body {
  width: 886px;
  height: 722px;
  padding: 0;
}

.popup-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 0, 1, 0.7);
  z-index: 99;
}

.popup {
  position: fixed;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  margin-top: -361px;
  margin-left: -443px;
  width: 886px;
  height: 722px;
  background: url("~@img/login-pop/bg-index-login.png") no-repeat center;
  background-size: 100%;
  z-index: 999;
}

.popup-register {
  position: fixed;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  margin-top: -361px;
  margin-left: -743px;
  width: 1486px;
  height: 722px;
  background: url("~@img/login-pop/bg-index-signin.png") no-repeat center;
  background-size: 100%;
  z-index: 999;
}

/deep/ .popup-register .el-tabs {
  margin: 110px auto auto;
  width: 1260px;
}

/deep/ .popup-register .el-tabs--top .el-tabs__item.is-top.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 40px;
  height: 40px;
  background: url("~@img/login-pop/icon-register-select.png") no-repeat center;
}

/deep/ .popup-register .el-select,
/deep/ .popup-register .el-input {
  width: 300px;
  height: 40px;
  background: rgba(255, 255, 255, 0);
  border-radius: 6px;
}

/deep/ .popup-register .el-input .el-input__inner {
  height: 40px;
  line-height: 40px;
  border: 1px solid rgba(44, 173, 255, 0.9);
  padding-left: 20px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.8;
}

/deep/ .popup-register span {
  display: inline-block;
  width: 80px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}

/deep/ .popup-register .el-input__suffix span {
  width: 40px;
  margin-right: -30px;
}

.flex-form {
  display: flex;
  justify-content: flex-start;

  >div {
    flex: 0 0 32%;
    margin-right: 20px;
    position: relative;
    margin-bottom: 30px;
  }
}

.btn-box {
  margin: 30px auto;
  width: 630px;
  display: flex;
  justify-content: space-between;

  div {
    width: 300px;
    height: 64px;
    line-height: 64px;
    border-radius: 6px;
    font-size: 32px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    opacity: 0.9;
    letter-spacing: 2px;
    cursor: pointer;

    &:first-of-type {
      border: 2px solid #0177e4;
    }

    &:last-of-type {
      background: linear-gradient(0deg, #0177e4, #00b8ff);
    }
  }
}

/deep/ .popup-register span.yzm {
  position: absolute;
  right: 20px;
  top: 10px;
  width: 110px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.8;
  z-index: 999;
  cursor: default;
}

/deep/ .popup-register .send-yzm .el-input .el-input__inner {
  padding-right: 120px;
}

/deep/ .popup-register span.yzm::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 2px;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.4);
}

.close {
  position: absolute;
  right: 48px;
  top: 30px;
}

/deep/ .el-tabs {
  margin: 110px auto auto;
  width: 480px;
}

/deep/ .el-tabs__header {
  padding: 0 10px 0;
}

/deep/ .el-tabs--top .el-tabs__item.is-top {
  padding: 0;
  width: 230px;
  height: 66px;
  line-height: 66px;
  font-size: 26px;
  font-weight: 400;
  color: #999999;
  text-align: center;
}

/deep/ .el-tabs--top .el-tabs__item.is-top.is-active {
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0.2rem 0rem 0.4rem #0065b3, -0.2rem 0rem 0.4rem #0065b3,
    0rem 0.2rem 0.4rem #0065b3, 0rem -0.2rem 0.4rem #0065b3;
}

/deep/ .el-tabs__nav-wrap::after {
  background-color: rgba(113, 205, 249, 1);
}

/deep/ .el-tabs__active-bar {
  background-color: #e9e7fd;
}

/deep/ .el-input__inner {
  background-color: transparent;
  height: 64px;
  line-height: 64px;
  border: 1px solid #6cb2d6;
  border-radius: 7px;
  font-size: 22px;
  font-weight: 400;
  color: #ffffff;
  padding-left: 72px;
  margin-bottom: 36px;
}

/deep/ .el-input__inner:focus {
  border: 1px solid #00d2ff;
  box-shadow: inset 0 0px 10px 0px #00d2ff, 0 0 10px 0px #00d2ff;
}

/deep/ .el-tabs__content {
  padding-top: 45px;
}

.input_father {
  position: relative;
  padding: 0 10px;
}

.input_father img {
  position: absolute;
  top: 18px;
  left: 24px;
  z-index: 99;
  cursor: pointer;
}

.input_father .forget,
.input_father .code,
.input_father .send_code {
  position: absolute;
  top: 15px;
  right: 6px;
  width: 160px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  cursor: default;
}

/deep/.code-input .el-input__inner {
  padding-right: 162px;
}

.input_father .send_code::after,
.input_father .code::after,
.input_father .forget::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.4);
}

.submit {
  margin-top: 36px;
  width: 460px;
  height: 64px;
  line-height: 64px;
  background: linear-gradient(0deg, #0177e4, #00b8ff);
  text-align: center;
  border-radius: 7px;
  font-size: 28px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
}

.other {
  margin-top: 36px;
  text-align: left;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.o-r {
  justify-content: flex-end;
}

/*
  *常用电脑尺寸  1600 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1600，采用下面的样式*/
@media screen and (max-device-width: 1600px) {
  .login_page .login_header {
    background: url(/img/index-title.4fff6e3a.png) no-repeat top center;
    background-size: 100%;
  }

  .login_page .time {
    font-size: 16px;
    padding-top: 30px;
    margin-left: 20px;
  }

  .login_page .user {
    margin-right: 20px;
    padding-top: 30px;
    font-size: 16px;

    img {
      width: 28px;
    }
  }

  .login_main {
    width: 1266px;
  }

  .login_main li {
    width: 120px;
    height: 120px;

    p {
      font-size: 20px;
    }

    img {
      margin: 0;
      width: 100px;
    }
  }

  .login_main li:nth-of-type(1) {
    top: 40px;
    left: 50px;
  }

  .login_main li:nth-of-type(2) {
    top: 40px;
    right: 60px;
  }

  .login_main li:nth-of-type(4) {
    top: 210px;
    right: 10px;
  }

  .login_main li:nth-of-type(6) {
    top: 380px;
    right: 10px;
  }

  .login_main li:nth-of-type(8) {
    top: 560px;
    right: 60px;
  }

  .login_main li:nth-of-type(3) {
    top: 210px;
    left: 0;
  }

  .login_main li:nth-of-type(5) {
    top: 370px;
    left: 0;
  }

  .login_main li:nth-of-type(7) {
    top: 560px;
    left: 60px;
  }

  .popup,
  .popup-register {
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
  }
}

/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {

  .popup,
  .popup-register {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
}

/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {}

/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .login_page .time {
    font-size: 12px;
    padding-top: 20px;
    margin-left: 10px;
  }

  .login_page .user {
    margin-right: 10px;
    padding-top: 20px;
    font-size: 12px;

    img {
      width: 24px;
    }
  }

  .login_main {
    width: 1266px;
  }

  .login_main li {
    width: 110px;
    height: 110px;

    p {
      font-size: 18px;
    }

    img {
      margin: 0;
      width: 110px;
    }
  }

  .login_main li:nth-of-type(1) {
    top: 100px;
    left: 50px;
  }

  .login_main li:nth-of-type(2) {
    top: 100px;
    right: 60px;
  }

  .login_main li:nth-of-type(4) {
    top: 300px;
    right: 10px;
  }

  .login_main li:nth-of-type(6) {
    top: 500px;
    right: 10px;
  }

  .login_main li:nth-of-type(8) {
    top: 700px;
    right: 60px;
  }

  .login_main li:nth-of-type(3) {
    top: 300px;
    left: 0;
  }

  .login_main li:nth-of-type(5) {
    top: 500px;
    left: 0;
  }

  .login_main li:nth-of-type(7) {
    top: 700px;
    left: 60px;
  }

  .popup,
  .popup-register {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
}

/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .login_page .time {
    font-size: 12px;
    padding-top: 20px;
    margin-left: 10px;
  }

  .login_page .user {
    margin-right: 10px;
    padding-top: 20px;
    font-size: 12px;

    img {
      width: 24px;
    }
  }

  .login_main {
    width: 1024px;
  }

  .login_main li {
    width: 100px;
    height: 100px;

    p {
      font-size: 16px;
    }

    img {
      margin: 0;
      width: 80px;
    }
  }

  .login_main li:nth-of-type(1) {
    top: 10px;
  }

  .login_main li:nth-of-type(2) {
    top: 10px;
    right: 60px;
  }

  .login_main li:nth-of-type(4) {
    top: 170px;
    right: 10px;
  }

  .login_main li:nth-of-type(6) {
    top: 330px;
    right: 10px;
  }

  .login_main li:nth-of-type(8) {
    top: 470px;
    right: 60px;
  }

  .login_main li:nth-of-type(3) {
    top: 170px;
    left: 0;
  }

  .login_main li:nth-of-type(5) {
    top: 330px;
    left: 0;
  }

  .login_main li:nth-of-type(7) {
    top: 470px;
    left: 60px;
  }

  .popup,
  .popup-register {
    transform: scale(0.7);
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
  }
}

/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .login_page .time {
    font-size: 12px;
    padding-top: 20px;
    margin-left: 10px;
  }

  .login_page .user {
    margin-right: 10px;
    padding-top: 20px;
    font-size: 12px;

    img {
      width: 24px;
    }
  }

  .login_main {
    width: 1024px;
  }

  .login_main li {
    width: 100px;
    height: 100px;

    p {
      font-size: 16px;
    }

    img {
      margin: 0;
      width: 80px;
    }
  }

  .login_main li:nth-of-type(2) {
    top: 10px;
    right: 150px;
  }

  .login_main li:nth-of-type(4) {
    top: 150px;
    right: 100px;
  }

  .login_main li:nth-of-type(6) {
    top: 300px;
    right: 100px;
  }

  .login_main li:nth-of-type(8) {
    top: 430px;
    right: 150px;
  }

  .login_main li:nth-of-type(3) {
    top: 150px;
    left: 0;
  }

  .login_main li:nth-of-type(5) {
    top: 290px;
    left: 0;
  }

  .login_main li:nth-of-type(7) {
    top: 430px;
    left: 60px;
  }

  .popup,
  .popup-register {
    transform: scale(0.6);
    -moz-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -o-transform: scale(0.6);
  }
}
</style>
